<!--
 * @Author: your name
 * @Date: 2021-08-30 20:39:23
 * @LastEditTime: 2021-08-31 22:05:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\Drawer\Drawer.vue
-->
<template>
    <Drawer v-bind="getBindProps" @close="onClose">
        <template v-if="!$slots.title" #title>
            <div class="drawer_header">
                <div class="drawer_header_bar">
                    <svg-icon :icon-class="icon" size="1.3" color="#666"></svg-icon>
                </div>
                <div class="drawer_header_title">
                    <slot name="titleToolbar"></slot>
                </div>
            </div>
        </template>
        <div class="drawer_content">
            <slot name="content"></slot>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { Drawer } from 'ant-design-vue'
import { visibleRef } from '../../setting/menuTrigger'
import { defineComponent, unref, computed } from 'vue'
/**
 *
 *
 * 有一些操作不需要更新UI界面,就可以用toRaw,节约性能,我们可以通过toRaw方法拿到它的原始数据，对原始数据进行修改,就不会更新UI界面
 * toRaw需要配合reactive
 *
 */

type optType = {
  visible: String | Boolean;
  placement: String;
  closable: String | Boolean;
};

export default defineComponent({
    name: 'ADrawers',
    components: {
        Drawer,
    },
    props: { icon: String },

    setup() {
        let { visibleRefValue } = visibleRef(false)
        // 绑定初始化参数
        const getProps = computed(() => {
            const opt = {
                visible: unref(visibleRefValue),
                placement: 'right',
                closable: false,
            }
            return opt as optType
        })
        const getBindProps = computed(() => ({
            ...unref(getProps),
        }))
        const onClose = () => {
            visibleRef(false)
        }
        return {
            getBindProps,
            onClose,
        }
    },
})
</script>

<style lang="less" scoped>
.drawer_header {
  display: flex;
  align-items: center;
  &_bar {
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
  &_title {
    font-size: 14px;
    font-weight: 100;
    color: #666;
  }
}
</style>
